<template>
  <div style="width: 80%">
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown trigger="click">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              ><span @click="fn_quit">退出登录</span></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <span>小明</span>
      </el-header>
      <el-main>
        <el-table
          :data="tableData"
          style="width: 100%"
          stripe="true"
          height="450"
        >
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column prop="name" label="Name" width="120">
          </el-table-column>
          <el-table-column prop="age" label="Age" width="140">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
               
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import instance from "../api/index";
export default {
  name: "one",
  components: {},
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        data: "",
        name: "",
        address: "",
      },
      formLabelWidth: "50px",
    };
  },
  created() {
    this.fn_one();
  },
  methods: {
    //数据请求
    async fn_one() {
      let { data } = await instance.get("/tables");
      console.log(data);
      this.tableData = data;
    },
    async handleDelete(i, n) {
      console.log(i, n.name);
      await instance.delete("tables/" + n.id);
      this.fn_one();
    },
    // 退出登录
    fn_quit() {
      localStorage.clear();
      this.$router.push({ name: "Login" });
    },
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
</style>